'use strict';
//年度业绩
import React,{Component} from 'react';
import Header from '../../common/header';
import * as URLconstant from '../../constant/URLconstant'
import Util from '../../common/util';
import DatePicker from 'react-native-modal-datetime-picker'
import AchieveList from './achieveList';//业绩列表
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView
} from 'react-native';
export default class yearAchievement extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            monthList:null,
            year:'',
            isShowDateTimePicker:false
        };
        this._handleDatePicked=this._handleDatePicked.bind(this)
          this._hideDateTimePicker=this._hideDateTimePicker.bind(this)
      }

    componentDidMount() {
        this.getYear()
    }

      getYear(){
          let date = new Date
          let year = date.getFullYear()
          this.setState({
              year:year
          })
          this.getAchieve(year)
      }

    getAchieve(year){
        let url = URLconstant.YEAR_ACHIEVEMENT
        let datakey=[]
        datakey['user_id']=this.props.user_id
        datakey['allShop']=this.props.allShop
        datakey['year']=year
        Util.get(url,datakey,this.getAchieveSuc.bind(this),this.errorCallback.bind(this))
    }
    getAchieveSuc(datas){
          if(datas.status==0){
              this.setState({
                  monthList:datas.data
              })
          }else{
              this.setState({
                  monthList:[]
              })
          }
    }
    errorCallback(err){

    }

    _handleDatePicked = (date) => {
          LOG('date===='+date)
        this.setState({
            year:date.getFullYear()
        })
        this._hideDateTimePicker()
        this.getAchieve(date.getFullYear())
    }

    _hideDateTimePicker = () => this.setState({isShowDateTimePicker: false})

    toList(month){
          this.props.navigator.push({
              component:AchieveList,
              passProps:{
                  user_id:this.props.user_id,
                  allShop:this.props.allShop,
                  month:month
              }
          })
    }

      render(){
          let monthList = this.state.monthList
          return(
              <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                  <Header navigator={this.props.navigator} initObj={{ title:'年度业绩',id:2}}/>
                <View style={styles.year_view}>
                    <Text onPress={()=>this.setState({isShowDateTimePicker:true})} style={{fontSize:14,color:"#333"}}>{this.state.year}【切换】</Text>
                </View>
                  {
                      monthList==null?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>
                          :
                          <View style={{flex:1}}>
                              {
                                  monthList.length==0?
                                      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                          <Text>没有业绩数据</Text>
                                      </View>
                                      :
                                      <View>
                                          {
                                              monthList.map((item,index)=>{
                                                  return(
                                                      <TouchableOpacity onPress={()=>this.toList(item.month)} key={index} style={styles.achieve_item}>
                                                          <View style={[styles.item_row,{marginBottom:10}]}>
                                                              <Text style={{fontSize:16,color:"#333"}}>{item.month}</Text>
                                                              <Text style={{fontSize:16,color:"#F75061"}}>总业绩:¥{item.month_sum}</Text>
                                                          </View>
                                                          <View style={styles.item_row}>
                                                              <Text style={{fontSize:14,color:"#F75061"}}>充值业绩:{item.sum_charger_amount}</Text>
                                                              <Text style={{fontSize:14,color:"#F75061"}}>销售业绩:¥{item.sum_buy_amount}</Text>
                                                          </View>
                                                      </TouchableOpacity>
                                                  )
                                              })
                                          }
                                      </View>
                              }
                              <DatePicker
                                  visible={this.state.isShowDateTimePicker}
                                  onConfirm={this._handleDatePicked}
                                  onCancel={this._hideDateTimePicker}
                                  titleIOS="请选择年份"
                                  cancelTextIOS='取消'
                                  confirmTextIOS='确定'
                                  date={new Date()}
                              />
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    year_view:{
        height:40,
        paddingHorizontal:10,
        justifyContent:'center'
    },
    achieve_item:{
        padding:10,
        backgroundColor:"#fff",
        borderBottomWidth:1,
        borderBottomColor:"#e0e0e0"
    },
    item_row:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    }
})